<template>
	<view>
		<l-painter isRenderImage custom-style="position: fixed;left: -200%" :board="base" @success="posterSuc" />
		<u-mask :show="posterImgShow" @click="posterImgShow = false">
			<view class="post-view u-flex-col u-row-center">
				<text class="u-text-center post-text">可长按下方图片保存到相册~</text>
				<image :src="posterImg" mode="" class="posterImg" v-if="posterImgShow" @longpress="saveImage"></image>
			</view>
		</u-mask>
		<!-- <l-painter isRenderImage :board="base" @success="posterSuc" /> -->
		<view class="header u-flex u-row-between u-p-t-32 u-p-b-32 u-p-l-32 bgColor">
			<view class="u-flex wid70">
<!-- 				<avatar-image width="150" :url="user.avatar_url"></avatar-image>
				<view class="u-flex-col u-m-l-32 u-font-26 colf4">
					<text class="u-m-b-16 u-font-38 bold">{{user.nick_name}}</text>
					<text class="">{{user.gradeName.name}}</text>
				</view> -->
				<text class="colf4 u-font-26">{{setting.share_content}}</text>
			</view>
			<view class="u-flex share-btn orange" @click="posterImgShow=!posterImgShow">
				<u-icon name="grid"></u-icon>
				<text class="u-m-l-20">分享</text>
			</view>
		</view>
		<view class="u-p-l-18 u-p-r-18 u-m-t-46">
			<view class="title u-font-28 bold col00 u-m-b-20">
				<text>推广列表（{{recommendList.total}}人）</text>
			</view>
			<list-comp :list="recommendList.data" @lower="lower"></list-comp>
		</view>
	</view>
</template>

<script>
	import * as UserApi from '@/api/user'
	import * as settingApi from '@/api/setting'
	import {share, recommend} from '@/api/share'
	import AvatarImage from '@/components/avatar-image'
	import lPainter from '@/components/lime-painter/'
	import listComp from './components/listComp.vue'
	export default {
		components: {
		  AvatarImage,
		  listComp,
		  lPainter
		},
		onLoad() {
			uni.showLoading()
			this.getRecommendList()
			this.getInfo()
			this.getCode()
			this.getUser()
		},
		data() {
			return {
				user: {},
				setting: {},
				recommendList: [],
				posterImg: '',
				codeImg: '',
				base: {
					width: '750rpx',
					height: '1334rpx',
					background: '#F6F7FB',
					views: [
						//背景图
						{
							type: 'image',
							src: '',
							mode: 'widthFix',
							css: {
								left: '0',
								top: '0',
								width: '750rpx',
								height: '1334rpx',
							}
						},
						//二维码
						{
							type: 'image',
							src: 'https://img2.baidu.com/it/u=3237556814,1803708880&fm=253&fmt=auto&app=120&f=PNG?w=365&h=365',
							mode: 'scaleToFill',
							css: {
								left: '255rpx',
								top: '1050rpx',
								width: '202rpx',
								height: '202rpx',
								radius: '50%'
							}
						},
					]
				},
				posterImgShow: false,
				page: 1,
				pageSize: 10
			};
		},
		methods: {
			getInfo() {
				settingApi.data().then(res => {
					console.log(res)
					this.setting = res.data.data
					this.base.views[0].src = res.data.data.codeImage.preview_url
				})
			},
			getUser() {
				let that = this
				let userInfo = uni.getStorageSync('userInfo') || null
				if(userInfo) {
					this.user = uni.getStorageSync('userInfo')
				}else {
					UserApi.info().then(res => {
						that.user = res.data.userInfo
					})
				}
			},
			getRecommendList() {
				let that = this
				recommend({
					page: that.page,
					pageSize: that.pageSize
				}).then(res => {
					if(res.data.status == 200) {
						that.recommendList = res.data.data.list
					}
				})
			},
			lower() {
				this.page+=1
				this.getRecommendList()
			},
			getCode() {
				share().then(res => {
					if(res.data.status == 200 ) {
						this.base.views[1].src = res.data.data.list
					}
				})
			},
			//保存图片
			saveImage() {
				let that = this
				uni.saveImageToPhotosAlbum({
					filePath: this.posterImg,
					success(res) {
						uni.showToast({
							title: '已保存到相册',
							icon: 'success',
							duration: 2000
						})
					}
				})
			},
			posterSuc(e) {
				uni.hideLoading()
				this.posterImg = e
			},
		}
	}
</script>

<style lang="scss">
	.bgColor {
		background: linear-gradient(45deg, #1C1C1C, #767676);
	}
	.bold {
		font-weight: bold;
	}
	.wid70 {
		width: 70%;
	}
	.orange {
		color: #FFDBB7;
	}
	.colf4 {
		color: #F4F4F4;
	}
	.col00 {
		color: #000000;
	}
	.share-btn {
		background: rgba(38,37,38, .8);
		border-radius: 30px 0px 0px 30px;
		padding: 16upx 60upx 16upx 20upx;
	}
	.post-view {
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		.post-text {
			font-size: 32upx;
			font-weight: bold;
			margin-bottom: 20upx;
			color: darkorange;
		}
		.posterImg {
			width: 530upx;
			height: 838upx;
		}
	}

</style>
